<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全秘钥
window._AMapSecurityConfig = {
  securityJsCode: "dfb260e1e68d1c126b9743398306b775"
};
export default {
  props: ["city_name"],
  data() {
    return {
      //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
      //map: null
    };
  },
  mounted() {
    this.initMap();
  },
  destroyed() {
    // 组件销毁，地图销毁，否则报错
    this.map.destroy();
  },
  methods: {
    // 初始化地图
    initMap() {
      let that = this;
      AMapLoader.load({
        key: "2184ab650e9473dd3403ec0b6bbf5a9b", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(AMap => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 3, //初始化地图级别
            center: [105.602725, 37.076636] //初始化地图中心点位置，默认中心点是 北京
          });
          console.log("--------------------------");
          // 通过传递过来的city_name 获取实际的经纬度
          let geocoder = new AMap.Geocoder({});
          var marker = new AMap.Marker();
          geocoder.getLocation(that.city_name, function(status, result) {
            if (status === "complete" && result.geocodes.length) {
              var lnglat = result.geocodes[0].location;
              console.log("++++++", lnglat);
              //document.getElementById('lnglat').value = lnglat;
              marker.setPosition(lnglat);
              that.map.setZoomAndCenter(10, [lnglat.lng, lnglat.lat]);
              that.map.add(marker);
              that.map.setFitView(marker);
              that.$emit("lnglat", {
                lnglat,
                city_name: that.city_name
              });
            } else {
              log.error("根据地址查询位置失败");
            }
          });
        })
        .catch(e => {
          console.log(e);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
#container {
  padding: 0px;
  margin: 0px auto;
  width: 90%;
  height: 16rem;
}
</style>